<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            height: 100%;
        }
        .section {
            height: 480px;
            position: relative;
        }
        .section h1 {
            text-align: center;
            font-size: 40px;
            color: aliceblue;
            position: absolute;
            /* 向下向右移动父盒子的一半 */
            top: 50%;
            left: 50%;
            /* 向x轴向y轴移动自身长宽的一半 */
            transform: translate(-50%,-50%);
            transition: all 10s;
        }
        /* 自定义类 */
        .text-animate {
            left: 0;
            transform: translate(-100%);
        }
        .section01 {
            background: red;
        }
        .section02 {
            background: orange;
        }
        .section03 {
            background: yellow;
        }
        .section04 {
            background: green;
        }
        .section05 {
            background: blue;
        }
        .section06 {
            background: skyblue;
        }
        .section07 {
            background: purple;
        }

        .nav {
            position: fixed;
            top: 100px;
            right: 40px;
        }
        .nav ul {
            list-style: none;
        }
        .nav ul li {
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background: olive;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="sections">
            <div class="section section01"><h1>狗儿就送回巴黎</h1></div>
            <div class="section section02"><h1>狗儿就送回巴黎</h1></div>
            <div class="section section03"><h1>狗儿就送回巴黎</h1></div>
            <div class="section section04"><h1>狗儿就送回巴黎</h1></div>
            <div class="section section05"><h1>狗儿就送回巴黎</h1></div>
            <div class="section section06"><h1>狗儿就送回巴黎</h1></div>
            <div class="section section07"><h1>狗儿就送回巴黎</h1></div>
        </div>
        <div class="nav">
            <ul>
                <li><a href="###"></a></li>
                <li><a href="###"></a></li>
                <li><a href="###"></a></li>
                <li><a href="###"></a></li>
                <li><a href="###"></a></li>
                <li><a href="###"></a></li>
                <li><a href="###"></a></li>
            </ul>
        </div>
    </div>

    <script>
        // js滚轮事件
        // function wheel(e) {
        //     console.log(e);
        //     var dalta = 0;//定义变量，表示滚轮滚动的方向
        //     if(!e) e = window.e;
        //     if(e.wheelDelta) {//IE,chrom浏览器使用的是wheelDelta,并且值为正负120
        //         delta = e.whieelDelta/120;
        //         if(window.opera) delta = -delta;//取反处理
        //     }else if(e.detail) {//FF浏览器使用的是detail，其值为正负3
        //         delta = -e.detail/3;//因为IE chrome等向下滚动是负值，EF是正值，为了处理一致性，此处取反处理
        //     }

        //     if(delta) handle(delta);
        // }
        // //上下滚动时的具体处理函数
        // function handle(delta) {
        //     if(delta<0) {
        //         console.log('向下滚动');
        //     }else{
        //         console.log('向上滚动');
        //     }
        // }




        $(function() {
            // 浏览器的滚轮滚动事件
            $('.section').on('mousewheel DOMMouseScroll',function(e) {
                // 滚一次，就跳转到下一个区块的最顶部；并且滚一次，小圆点也滚一个，并且有动画效果
                // alert('滚动啦');
                $.each('.section',function() {
                    var scrollheight = $(this).offset().top;//获取每一个区块元素到顶部的距离
                    // 让滚动的距离就等于每个区块盒子的顶边距离浏览器顶部的距离
                    scrollTop: scrollheight;
                });
                
            });
                
            
        })
    </script>
</body>
</html>